<template>
  <van-nav-bar
    title="注册"
    right-text="去登录"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <div style="text-align: center">
    <van-icon class="icon" name="manager-o" size="24px" />
  </div>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <div>
          <van-cell-group inset>
            <van-field
              v-model="sms"
              center
              clearable
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  @click="login"
                  :disabled="disabled"
                  type="primary"
                  >{{ text }}</van-button
                >
              </template>
            </van-field>
          </van-cell-group>
        </div>
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入你的密码' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="user"
          name="邀请码"
          label="邀请码"
          placeholder="邀请码"
          :rules="[{ required: true, message: '请输入你的邀请码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button @click="tj" round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import axios from "axios";
import { ref } from "vue";
let username = ref("");
const sms = ref("");
const digit = ref("");
const number = ref("");
const password = ref("");
const user = ref("");
let num = 5;
let disabled = ref(false);
let text = ref("发送验证码");
let time = null;
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push({
    name: "login",
  });
};

function login() {
  disabled.value = true;
  text.value = "正在发送...";
  axios({
    url: "https://fc-mp-827be4c1-176f-4e1f-985a-621b4417eadf.next.bspapp.com/api/user/pub/sendSmsCode",
    method: "POST",
    data: {
      checkUserExist: "!exists",
      type: "register",
      mobile: username.value,
    },
  }).then((res) => {
    console.log(res);
    if (res.data.code == 0) {
    } else {
      time = setInterval(() => {
        num--;
        text.value = num + "秒";
        if (num <= 0) {
          clearInterval(time);
          num = 5;
          text.value = "再次获取";
          disabled.value = false;
        }
      }, 1000);
    }
  });
}
function tj() {
  axios({
    url: "https://fc-mp-827be4c1-176f-4e1f-985a-621b4417eadf.next.bspapp.com/api/user/pub/loginBySms",
    method: "POST",
    data: {
      mobile: username.value, //自己的手机号,别乱写陌生人的，会被封号
      code: sms.value, //验证码
      type: "register", //固定填写register
      password: password.value, //设置自己的密码
    },
  }).then((res) => {
    console.log(res);
  });
}
function send() {
  text.value = "正在发送...";
  disabled.value = true;
  console.log(aaa);
  axios({
    url: "https://fc-mp-827be4c1-176f-4e1f-985a-621b4417eadf.next.bspapp.com/api/user/pub/sendSmsCode",
    method: "POST",
    data: {
      checkUserExist: "!exists",
      type: "register",
      mobile: username.value,
    },
  }).then((res) => {
    if (res.data.code == 0) {
      time = setInterval(() => {
        num--;
        text.value = num;
        if (num <= 0) {
          clearInterval(time);
          num.value = 60;
          disabled.value = false;
          text.value = "再次获取";
        }
      }, 1000);
    }
  });
}
</script>
<style>
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.icon {
  padding: 40px;
  background-color: #dddddd;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 50px;
}
.log-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.log-top div:nth-child(2) {
  margin-left: 30px;
}
</style>
